<template>
  <div>
  <div class="overlay"></div>
  <div class="fixed-navbar" style=";margin-top: 10%; margin-left: 40%; width: 30%;height: 45%;" >

    <div  style="width: 100%;height: 35px;display: flex;align-items: center;background-color:#3a8ee6;">
      <div
          style="margin: 5px;width: calc(100% - 30px);font-family: 'Kaiti SC';font-size: 15px;color: #0077ff;color: white;">
        请填写用户名
      </div>
    </div>
    <el-form ref="model" :model="model" size="small" label-width="80px">
      <el-form-item label="用户名" >
        <el-input style="width: 85%" v-model="model.name" :rules="[{ required: true, message: '当前用户名必须填写'}]"></el-input>
      </el-form-item>
      <el-form-item label="用户昵称">
        <el-input style="width: 85%" v-model="model.nickName" :rules="[{ required: true, message: '当前用户昵称必须填写'}]"></el-input>
      </el-form-item>

    </el-form>
    <div style="margin:10px;color:black;background:#CAE1F9;padding:10px;line-height:25px;">
      温馨提示：<br/>
      1.用户名为姓名汉语拼音<br/>
      2.用户昵称为汉语姓名<br/>
    </div>
    <div style="margin-top:33%;margin-left: 76%">
      <el-button type="success" size="small" @click="initName()" :data="model">立即保存</el-button>
    </div>
  </div>
  </div>
</template>
<script setup>
</script>
<script>
export default {
  extends: elmVueBase,
  data() {
    return {
      loading: false,
      model:{id:null,name:null,nickName:null}
    }
  },
  created() {
    this.loading=true
    this.model.type="自定义";
  },
  methods: {
    initName() {
      this.$refs.model.validate(async valid => {
        if (valid) {
          debugger

          this.model.id = elm.info.user.id
          let res = await elm.post("/system/login/work/weixin/callback/initName", this.model);
          if (res.code =='success') {
            let user = {name:this.model.nickName}
            elm.info.user = user;
            this.$message.success("保存成功");
            location.href = elm.settings.routefix + elm.info.system.path;
            this.close();
          } else {
            this.$message.error(res.msg);
          }
        } else {
          return
        }
      })
    }
  }
}
</script>
<style scoped>
.fixed-navbar {
  position: fixed; /* 设置定位方式为固定定位 */
  top: 0;          /* 距离顶部0px */
  left: 0;         /* 距离左侧0px */
  width: 100%;     /* 宽度占满整个视口 */
  background-color:  #FFFFFF; /* 背景颜色，可根据需要调整 */
  z-index: 1000;   /* 确保导航栏在最上层 */

  solid-color: black;
  border: 0px solid #F0F0F0;

}
.overlay {
  position: fixed; /* 固定定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
  //display: none; /* 默认隐藏 */
  z-index: 888; /* 确保在最上层 */
}
</style>
